<template>
	<view class="home">
		<!-- 导航条 -->
		<scroll-view scroll-x class="navscroll">
			<view class="item" :class="index==navIndex ? 'active' : ''" v-for="(item,index) in navData"
			:key="item.id"
			@click="clickNav(index,item.id)"
			>{{item.classname}}</view>
		</scroll-view>
		
		<!-- 主体内容 -->
		<view class="content">
			<view class="row" v-for="item in newData" :key="item.id">
				<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
			</view>
		</view>
		
		<view class="nodata" v-if="!newData.length">
			<image src="../../static/images/nodata.png" mode="widthFix"></image>
		</view>
		
		<!-- 优化细节增加loading加载样式 -->
		<view class="loading" v-if="newData.length">
			<view v-if="loading==1">数据加载中...</view>
			<view v-if="loading==2">没有更多了~~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				navData: [],
				newData: [],
				currentPage: 1,
				idx: 50,
				loading: 0    //0默认  1加载中  2没有更多了
			}
		},
		onLoad() {
			this.getNavData();
			this.getNewData();
		},
		// 触底加载更多
		onReachBottom(){
			// console.log("触底啦，加载更多");
			if(this.loading == 2){
				return;
			}
			this.currentPage++;	
			this.loading = 1;
			this.getNewData(this.idx);
		},
		methods: {
			// 点击导航切换
			clickNav(index,id){
				this.navIndex = index;
				// 为了解决在触底加载更多数据后,再去点击别的导航时,能够请求得到数据,并且不会将数据拼接在之前的导航数据上
				this.currentPage = 1;
				this.newData = [];
				this.loading = 0;
				// console.log(id);
				this.idx = id;
				this.getNewData(id);
			},
			
			// 跳转到详情页
			goDetail(item){
				uni.navigateTo({
					url: `/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},
			
			// 获取导航列表数据
			getNavData(){
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/navlist.php",
					success: res=>{
						// console.log(res);
						this.navData = res.data;
					}
				})
			},
			
			// 获取新闻列表数据
			getNewData(id=50){
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
					data:{
						cid: id,
						page: this.currentPage
					},
					success: res=>{
						// console.log(res);
						if(res.data.length == 0){
							this.loading = 2;
						}
						this.newData = [...this.newData,...res.data];	//实现在触底加载更多数据时，让数据进行拼接
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navscroll{
		height: 100rpx;
		background: #F7F8FA;
		white-space: nowrap;
		// window-top的吸顶效果
		position: fixed;
		top: var(--window-top);
		left: 0;
		z-index: 10;
		/* 去除scroll-view在h5端存在的滚动条 */
		/deep/ ::-webkit-scrollbar {
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}
		.item{
			font-size: 40rpx;
			display: inline-block;
			line-height: 100rpx;
			padding: 0 30rpx;
			color: #333;
			&.active{
				color: #31C27C;
			}
		}
	}
	
	.content{
		padding: 30rpx;
		padding-top: 130rpx;
		.row{
			border-bottom:1px dotted #efefef;
			padding: 20rpx 0;
		}
	}
	
	.nodata{
		display: flex;
		justify-content: center;
		imgae{
			width: 360rpx;
		}
	}
	
	.loading{
		text-align: center;
		font-size: 26rpx;
		color:#888;
		line-height: 2em;
	}
</style>
